<template>
  <div>
    <el-card>
      <el-row>
        <span style="font-size: 23px;font-weight: bold">服务申请详情</span>
        <OperationBar :approveStatus="state.approveStatus"
                      @approve="page.submitApprove"
                      @select="page.select"
                      @upload="page.upload"
                      pageName="serviceForm"/>
      </el-row>
    </el-card>
    <div style="padding: 20px">
      <!--企业基础信息-->
      <EntBaseInfo :entId="state.entId" :applyId="route.query.id"/>
      <!--单服务详情-->
      <ServiceDetail :svId="state.svId" :applyId="route.query.id"/>
      <!--日志-->
      <ApproveLog ref="approveLogRef" :applyId="route.query.id"/>
    </div>
    <SelectSvSpecialist ref="selectSvSpecialistRef" @submit="page.selectSvSpecialist"></SelectSvSpecialist>
    <UploadDialog ref="uploadRef" v-model="state.folderId" @submit="page.fileSubmit"></UploadDialog>
  </div>
</template>
<script lang="ts" setup>
import {reactive, getCurrentInstance, ref, onMounted, onBeforeMount} from "vue";
import {useRouter, useRoute} from "vue-router";
import {queryServiceApplyEntity, svApplyApproved} from "/@/api/entService/serviceApply";

import EntBaseInfo from "/src/views/enterpriseManager/component/entBaseInfo.vue";
import OperationBar from "/src/views/enterpriseManager/component/operationBar.vue";
import ApproveLog from "/src/views/enterpriseManager/component/approveLog.vue";
import ServiceDetail from "/@/views/enterpriseManager/component/serviceDetail.vue";
import SelectSvSpecialist from "/@/views/enterpriseManager/component/selectSvSpecialist.vue";
import UploadDialog from "/@/views/enterpriseManager/component/uploadDialog.vue";
import {approveMark} from "/@/views/enterpriseManager/dictionary/constant";

const {proxy} = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();

const returnDialogRef = ref<{ openDialog: () => void }>();
const selectSvSpecialistRef = ref();
const approveLogRef = ref();
const uploadRef = ref();

const state = reactive({
  entId: "",//企业baseInfo表id
  svId: "",//申请的服务或服务套餐id
  approveStatus: "",
  userId: "",
  dialogContent: "",
  approveLogWhere: {
    operateInfoId: ""
  },
  folderId: ""
});
const page = {
  init: async () => {
    try {
      if (route.query.id) {
        //根据applyId查询实体
        const applyRes = await queryServiceApplyEntity(route.query.id);
        if (!applyRes.success) {
          proxy.$wigem.alert.error("加载服务申请信息失败！");
          return;
        }
        //获取entInfoId
        state.entId = applyRes.data.entId;
        state.svId = applyRes.data.svId;
        state.approveStatus = applyRes.data.approveStatus;
      }
    } catch (error) {
      console.error('查询过程中出现错误:', error);
    }
  },
  refresh: () => {
    page.init();
    approveLogRef.value.load();
  },
  selectSvSpecialist: (obj: object) => {
    state.userId = obj.queryObj.userId;
    page.submitApprove(obj);
  },
  select: async (obj: object) => {
    //选择服务专员和合作伙伴
    selectSvSpecialistRef.value.openDialog();
  },
  upload: async (obj: object) => {
    //打开附件上传
    uploadRef.value.openUploadForm();
  },
  submitApprove: async (obj: object) => {
    try {
      let queryParams = {
        id: route.query.id,
        approveStatus: obj.approveMark
      }
      if (obj.queryObj) {
        Object.assign(queryParams, obj.queryObj);
      }

      const svApplyApproveRes = await svApplyApproved(queryParams);
      if (svApplyApproveRes.success) {
        proxy.$wigem.alert.success(svApplyApproveRes.msg);
      } else {
        proxy.$wigem.alert.error(svApplyApproveRes.msg);
      }
      page.refresh();
    } catch (e) {
      proxy.$wigem.alert.error("审批失败！");
    }
  },
  fileSubmit: () => {
    if (!state.folderId) {
      proxy.$wigem.alert.warning("您还未上传材料！");
      return;
    }

    // 提交上传的文件夹ID
    page.submitApprove({
      approveMark: approveMark.APPROVED,
      queryObj: {folderId: state.folderId}
    });
  }
};
onBeforeMount(() => {
  page.init();
});

onMounted(() => {
});

</script>
<style lang="scss" scoped>

::v-deep(.el-card__body) {
  padding: 20px;
}


.stepClass {
  display: flex;
  justify-content: center
}
</style>
